<template>
    <div>
        <div class="width-75 m-t-28">
            <i class="iconfont icon-cha fs-28" @click="$router.back(-1)"></i>
        </div>
        <div class="tc m-t-6 p-b-10 bb-1-e">
            <img src="../img/logo.png" alt="" class="register-logo">
        </div>
        <nav>
            <ul>
                <li class="width-75 bb-1-e z-header">
                    <span class="c-b1">手机号:</span>
                    <input type="text" class="b-0" v-model="username">
                </li>
                <li class="width-75 bb-1-e z-header flex">
                    <div>
                        <span class="c-b1">验证码:</span>
                        <input type="text" class="b-0" v-model="doCode">
                    </div>
                    <div class="code tc" @click="code" v-if="!codoButton">
                        获取验证码
                    </div>
                    <div class="code tc" v-if="codoButton">
                        {{Time}}
                    </div>
                </li>
                <li class="width-75 bb-1-e z-header">
                    <span class="c-b1">密码:</span>
                    <input type="text" class="b-0" v-model="Password">
                </li>
                <li class="tc">
                    <button class="register-button c-f b-c2" @click="register">注册</button>
                </li>
                <li class="width-75 c-3 m-t-28">
                    <p class="tr">
                        <router-link to="/login">
                            已有账号，去登录
                        </router-link>
                    </p>
                </li>
            </ul>
        </nav>
    </div>
</template>
<script>
// 18749986696
import Vue from 'vue'
import { MessageBox } from 'mint-ui';
import { vali, z } from '../assets/js/common'
Vue.prototype.$vali = vali

export default {
    data() {
        return {
            doCode: '',
            username: '',
            Password: '',
            codoButton: false,
            Time:60
        }
    },
    methods: {
        code() {
            var params = new URLSearchParams();
            params.append("mobilePhone", this.username);
            //调用封装的函数
            if (this.$vali(this.username, /^1[0-9]{10}$/, "请输入正确的手机号") == true) {

                this.$http({
                    method: 'post',
                    url: localPath + '/user/doCode',
                    data: params
                }).then((response) => {
                    console.log(response);
                    // codoButton为true 让获取验证码隐藏
                    this.codoButton = true;
                    this.count();
                }).catch((error) => {
                    console.log(error);
                })
            }
        },
        count() {
            var second = 60;
            var timer = setInterval(()=>{
                second -= 1;
                if (second > 0) {
                    this.Time = second;
                //   this.codoButton = true;
                } else {
                    this.codoButton = false;
                }
            }, 1000);

        },
        register() {
            var params = new URLSearchParams();
            params.append("username", this.username);
            params.append("Password", this.Password);
            params.append("code", this.doCode);
            if (this.$vali(this.username, /^1[0-9]{10}$/, "请输入正确的手机号") == false) {

            } else if (this.$vali(this.Password, /^\d{6}$/ , "请输入6位数字") == false) {
                        // /^[a-zA-Z0-9_]{6}$/
            } else {
                this.$http({
                    method: 'post',
                    url: localPath + '/user/register',
                    data: params
                }).then((response) => {
                    console.log(response);
                    MessageBox.alert(response.data.message);
                    if (response.data.message == "注册成功") {
                        this.$router.push({ path: '/login' });
                    }
                }).catch((error) => {
                    console.log(error);
                })
            }
        }
    },
    mounted() {
        document.addEventListener(z());
    },
}


</script>
<style>

</style>
